<template>
	<view class="page">
		<pageheader :setting="settingdata"></pageheader>
		<view class="skulist">
			<!-- 	<view class="title">请选择规格封面</view>
			<view class="photos">
				<view class="photobox">
					<u-upload ref="upload" max-size="12328959" :action="action" width="210" height="210" max-count="1"
						:file-list="echoimages" @on-remove="removeimg" @on-uploaded="uploaded">
					</u-upload>
				</view>
			</view>
			<view class="title" style="color: #C4C4C4;">说明: 此图片为非必选项.若未上传,默认商品主图; </view> -->

			<view class='form' v-for="(item,index) in spec_attr" :key="index">
				<view class='form-line flex'>
					<view class='left'>
						<text class="ml15">规格名称 </text>
					</view>
					<view class="flex_align">{{item.group_name}}
						<u-icon name="close" @click="delet_group(index)" class="li_close"></u-icon>
					</view>
				</view>
				<view class=' flex_align sku_line'>
					<view class="li_box" v-for="(items,indx) in  item.spec_items" :key="index">
						<view class="li_upload" v-if='item.checked'>
							<u-upload ref="upload" max-size="12328959" :action="action" width="160" height="160"
								max-count="1" :file-list="items.images" @on-uploaded="uploaded_top($event,index,indx)">
							</u-upload>
						</view>
						<view class="flex_align text_box">
							{{items.spec_value}}
							<u-icon name="close" @click="handleClose(items,index,indx)" class="li_close"></u-icon>
						</view>
					</view>

					<!-- 	<view class="li_input flex_align" v-if="inputVisible==index">
						<input type="text" name="consignee" v-model="new_spec" placeholder='规格值' maxlength='20'
							@blur="handleInputConfirm(index,item.group_id)" placeholder-class="placeholder"></input>
			
					</view> -->
					<view class="add_sku_input" @click="showInput(item.radiolist_index,index)">
						+添加
					</view>
				</view>
				<view class=" flex_bet add_img_box">
					<view class="">
						添加规格图片
					</view>
					<u-switch v-model="item.checked" active-color="#38BE8C" @change="change_checked(index)"></u-switch>
				</view>
			</view>
			<!-- 		<view class='form' v-show="!show_add_sub">
				<view class='form-line flex'>
					<view class='left'>
						<u-icon name="minus-circle-fill" color="#969696" size="32" @click="close_add_sub()"></u-icon>
						<text class="ml15">规格名称</text>
					</view>
					<input type="text" name="consignee" v-model="skuitem.skuname" placeholder='请输入规格名称' maxlength='20'
						@blur="changename"></input>
				</view>

				<view class='form-line flex'>
					<view class='left'>
						<text class="ml15">规格值</text>
					</view>
					<input type="text" name="consignee" v-model="skuitem.skunum" placeholder='请输入规格值' maxlength='20'
						@blur="changenum"></input>
				</view>
				<view class='form-line' @click="addtitle">
					<view class="flex_center">确认添加</view>
				</view>
			</view> -->

			<view class='form' @click="show_add">
				<view class='form-line'>
					<view class="flex_center">+添加规格</view>
				</view>
			</view>
			<view class="flex_align piliang_box" v-if="spec_list.length>0&&is_batch">
				<view class="piliang" @click="show_batch">
					批量设置
				</view>
				<!-- <navigator :url="'./sku_set?id='+good_id" class="piliang" v-if="operation_type">库存设置</navigator>
 -->
			</view>
			<view class="piliang" v-show="!is_batch" @click="show_batch">
				取消批量
			</view>
			<view class='form form_table' v-if="spec_list.length>0">
				<view class="table_head flex_align">
					<view class="li_check" v-show="!is_batch">
					</view>
					<view class="img_box">
					</view>
					<view class="li" v-for="(item,index) in spec_attr" :key="index">
						{{item.group_name}}
					</view>
					<view class="info_price">
						综合信息
					</view>
				</view>
				<view class="table_line flexs" v-for="(item,index) in spec_list" :key="index">
					<view class="li_check" v-show="!is_batch">
						<u-checkbox @change="checkboxChange" v-model="item.form.is_select"
							style="position: absolute;top:25%;left: 20%;" active-color="#19BE6B" :name="index">
						</u-checkbox>
					</view>
					<view class="img_box">
						<image :src="item.form.image_path" mode="aspectFill" class="table_img"
							@click="show_img(item.form.image_path)"></image>
					</view>
					<view class="li" v-for="(items,idx) in item.rows" :key="idx">
						<view class="li_style">
							{{items.spec_value}}
						</view>
					</view>
					<view class="info_price " @click="show_popup(item,index)">
						<view class="price_box flex_align">
							<view class="price">
								<view class="">
									市场价：{{item.form.money}}
								</view>
								<view class="">
									成本价：{{item.form.cost_price }}
								</view>
								<view class="">
									库存：{{item.form.stock}}
								</view>
							</view>
							<u-icon name="arrow-down-fill" class="xia"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submitbox flex_li" v-if="!is_batch">
			<view class="li_check">
				<u-checkbox @change="allChange" v-model="all_select" active-color="#19BE6B">全选</u-checkbox>
			</view>
			<view class="btn" @click="show_popup()">设置价格库存</view>
			<view class="btn" @click="show_batch()">完成设置</view>
		</view>
		<view class="submitbox" v-if="is_batch">
			<view class="submitbtn" @click="submit">完成</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" @close="quxiao">
			<view class="popup_title">价格库存</view>
			<view class=" popup_top">
				<u-upload ref="upload" max-size="12328959" style="margin: 0 auto;" :action="action" width="210"
					height="210" max-count="1" :file-list="echoimages" @on-remove="removeimg" @on-uploaded="uploaded"
					v-if="show&&is_batch">
				</u-upload>
			</view>
			<view class="flex_align popup_input">
				<text>*划线价</text> <input type="text" :value="chang_item_form.cost_price" @blur="chang_price"
					@confirm='chang_price' placeholder="￥请输入价格" />
			</view>
			<view class="flex_align popup_input">
				<text>*市场价</text><input type="text" :value="chang_item_form.money" @blur="chang_money"
					@confirm='chang_money' placeholder="￥请输入价格" />
			</view>
			<view class="flex_align popup_input" v-if="!operation_type">
				<text>*库存</text><input type="text" :value="chang_item_form.stock" @blur="chang_stock"
					@confirm='chang_stock' />
			</view>
			<view class="flex_align popup_foot">
				<view class="popup_sub" @click="quxiao">
					取消
				</view>
				<view class="popup_sub green" @click="quren">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show_add_open" mode="bottom" border-radius="14" @close="quxiao" class="popup_box">
			<view class="popup_title">添加规格名称</view>
			<u-checkbox-group v-model="radiovalue" @change="groupChange" :wrap="true">
				<scroll-view scroll-y="true" style="height: 600rpx;" bindscrolltolower="lower">
					<block v-for="(item, index) in radiolist1" :key="index">
						<u-checkbox v-model="item.checked" :name="index" v-if="!item.is_select">
							{{item.spec_name}}
						</u-checkbox>
					</block>
				</scroll-view>
			</u-checkbox-group>
			<!-- 	<u-radio-group v-model="radiovalue" @change="groupChange" :wrap="true">
				<scroll-view scroll-y="true" style="height: 600rpx;" bindscrolltolower="lower">
					<block v-for="(item, index) in radiolist1" :key="index">
						<u-radio :name="index" v-if="!item.is_select">
							{{item.spec_name}}
						</u-radio>
					</block>
				</scroll-view>
			</u-radio-group> -->
			<view class="flex_align popup_foot">
				<view class="popup_sub green" @click="new_sku">
					新建规格
				</view>
				<view class="popup_sub green" @click="quren_add">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup class="popup_box" v-model="show_add_next_open" mode="bottom" border-radius="14"
			@close="quxiao_add_next">
			<view class="popup_title">添加规格值</view>
			<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
				<scroll-view scroll-y="true" style="height: 600rpx;" bindscrolltolower="lower">
					<block v-for="(item, index) in checkbox_list" :key="index">
						<u-checkbox v-model="item.checked" :name="item.spec_value" v-if="!item.is_select">
							{{item.spec_value}}
						</u-checkbox>
					</block>
				</scroll-view>
			</u-checkbox-group>
			<view class="flex_align popup_foot">
				<view class="popup_sub green" @click="new_sku_next">
					新建规格值
				</view>
				<view class="popup_sub green" @click="quren_add_next">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show_add_open_sku" mode="center" border-radius="14" @close="quxiao_add">
			<view class="popup_add">
				<view class="popup_title">新建规格</view>
				<view class="form">
					<view class='form-line flex'>
						<view class='left'>
							<text class="ml15">规格名称</text>
						</view>
						<input type="text" name="consignee" v-model="skuitem.skuname" placeholder='请输入规格名称'
							maxlength='20' @blur="changename"></input>
					</view>
					<view class='form-line flex'>
						<view class='left'>
							<text class="ml15">规格值</text>
						</view>
						<input type="text" name="consignee" v-model="skuitem.skunum" placeholder='请输入规格值' maxlength='20'
							@blur="changenum"></input>
					</view>
				</view>
				<view class="flex_align popup_foot">
					<view @click="quxiao_add">
						取消
					</view>
					<view @click="addtitle">
						新建并选中
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show_add_open_sku_next" mode="center" border-radius="14" @close="quxiao_add">
			<view class="popup_add">
				<view class="popup_title">新建规格值</view>
				<view class="form">
					<view class='form-line flex'>
						<view class='left'>
							<text class="ml15">规格值</text>
						</view>
						<input type="text" name="consignee" v-model="new_spec" placeholder='请输入规格值'
							maxlength='20'></input>
					</view>
				</view>
				<view class="flex_align popup_foot">
					<view @click="quxiao_add_next_sku">
						取消
					</view>
					<view @click="handleInputConfirm">
						新建并选中
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '添加规格',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "addsku"
				},
				radiovalue: [],
				radiolist1: [],
				show_add_next_open: false,
				show_add_open_sku_next: false,
				checkbox_list: [],
				show_add_open: false,
				show_add_open_sku: false,
				show: false,
				showindex: '',
				chang_item: {},
				// 回显的img
				echoimages: [],
				//url
				action: "",
				// skulist: [],
				skuitem: {},
				is_batch: true, //切换是否批量操作
				spec_attr: [],
				inputVisible: null,
				spec_attr_2: [],
				spec_list: [],
				show_add_sub: true,
				new_spec: '',
				chang_item_form: {},
				all_select: false,
				is_checked_img: false,
				operation_type: false, //判断是否是修改

				cate_ids: '',
			};
		},
		onLoad(e) {
			this.cate_ids = e.cate_ids
			this.get_class_list(e.cate_ids)
			_this = this

			_this.action = _this.$api.getbase() + 'fileupload'

			if (e.good_id) {
				console.log(e.good_id)
				this.operation_type = true
				this.good_id = e.good_id
			}
		},
		onShow() {
			if (wx.getStorageSync("relevance")) {

			}
		},
		methods: {


			change_checked(e) {
				let spec_attr = [...this.spec_attr]
				spec_attr.forEach((item, index) => {
					if (e != index) {
						spec_attr[index].checked = false
						// item.spec_items.forEach((items, indexs) => {
						// 	delete spec_attr[index].spec_items[indexs].image
						// 	delete spec_attr[index].spec_items[indexs].image_path
						// 	delete spec_attr[index].spec_items[indexs].images
						// })
					}
				})
				this.spec_attr = [...spec_attr]
				this.combination(true, e)
			},
			checkboxGroupChange(e) {
				this.checkbox_list = [...this.checkbox_list]
			},
			quxiao_add() {
				this.show_add_open_sku = false
			},

			quxiao_add_next() {
				this.show_add_next_open = false
			},
			quxiao_add_next_sku() {
				this.show_add_open_sku_next = false
				this.new_spec = ''
			},
			new_sku() {
				this.show_add_open_sku = true
				this.skuitem = {};
			},
			new_sku_next() {
				this.show_add_open_sku_next = true
				this.new_spec = ''
			},
			quren_add() {

				this.radiolist1.forEach((item, index) => {
					if (item.checked) {
						let info = item
						this.spec_attr.push({
							group_name: info.spec_name,
							group_id: info.id,
							spec_items: [],
							radiolist_index: index,
							checked: false,
						});
						this.radiolist1[index].checked = false
					}
				})

				console.log(this.spec_attr)
				this.skuitem = {};
				this.radiovalue = []
				this.show_add_open = false
			},
			quren_add_next() {
				this.checkbox_list.forEach((item) => {
					if (item.checked) {
						this.spec_attr[this.inputVisible].spec_items.push({
							spec_value: item.spec_value,
							item_id: item.id,
						});
					}
				})

				this.show_add_next_open = false
				this.combination();
				this.judge_all()
			},

			groupChange(e) {
				this.radiovalue = e
				// this.radiolist1[this.radiovalue].is_select = true
			},
			get_class_list(e) {
				this.$api.get('spec', {
					cate_id: e
				}).then(res => {
					this.radiolist1 = res
					if (wx.getStorageSync('spec_many') && wx.getStorageSync('spec_many') != 'null') {
						let spec_many = JSON.parse(wx.getStorageSync('spec_many'))
						console.log(spec_many)
						this.spec_attr = spec_many.spec_attr ? spec_many.spec_attr : []
						// this.spec_attr_2 = spec_many.spec_attr?spec_many.spec_attr:[]
						this.spec_list = spec_many.spec_list ? spec_many.spec_list : []
						this.spec_attr.some((item, index) => {
							if (item.checked) {
								item.spec_items.forEach((items, indx) => {
									this.spec_attr[index].spec_items[indx].images = [{
										url: items.image_path
									}]
								})
								return true
							}

						})

						this.spec_attr.forEach((item, index) => {
							this.radiolist1.some((items, indx) => {
								if (item.group_id == items.id) {
									this.spec_attr[index].radiolist_index = indx
									return true
								}
							})
						})
						this.radiolist1.forEach((item) => {
							item.checked = false
						})
						this.radiolist1 = [...this.radiolist1]
						console.log(this.spec_attr, 452)
						this.spec_attr = [...this.spec_attr]

						this.combination()
					}
				})
			},
			show_img(url) {
				this.$plug.showImg([url])
			},
			close_add_sub() {
				this.skuitem = {};
				this.show_add_sub = true
			},
			allChange(e) {
				this.spec_list.forEach((item, index) => {
					this.spec_list[index].form.is_select = e.value
				})
			},
			show_batch() {
				this.is_batch = !this.is_batch
			},
			checkboxChange(e) {
				this.spec_list[e.name].form.is_select = e.value
				this.spec_list = [...this.spec_list]
				this.judge_all()

			},
			judge_all() {
				let speclist = [...this.spec_list]
				this.all_select = speclist.every(item => {
					return item.form.is_select
				})
			},

			uploaded(e) {
				let res = e[0].response
				this.chang_item_form.image = res.data.url;
				this.chang_item_form.image_path = res.data.fullurl;

			},
			uploaded_top(e, index, indx) {
				let res = e[0].response
				this.spec_attr[index].spec_items[indx].image = res.data.url
				this.spec_attr[index].spec_items[indx].image_path = res.data.fullurl;
				console.log(this.spec_list)
				this.combination(true, indx)

			},

			removeimg(e) {
				this.chang_item_form.image = '';
				this.chang_item_form.image_path = '';
			},
			chang_stock(e) {
				this.chang_item_form.stock = e.detail.value
			},
			chang_money(e) {
				this.chang_item_form.money = e.detail.value
			},
			chang_price(e) {
				this.chang_item_form.cost_price = e.detail.value
			},
			quxiao() {
				this.show = false
				this.showindex = ''
				this.chang_item = {}
			},

			quren() {
				if (this.is_batch) {
					let spec_list = [...this.spec_list]
					spec_list[this.showindex].form = {
						...this.chang_item_form
					}
					this.spec_list = [...spec_list]
					this.show = false
					this.showindex = ''
				} else {
					let spec_list = this.spec_list
					spec_list.forEach(item => {
						if (item.form.is_select) {
							item.form.stock = this.chang_item_form.stock
							item.form.money = this.chang_item_form.money
							item.form.cost_price = this.chang_item_form.cost_price
							item.form.is_select = true
						}
					})
					this.spec_list = spec_list
					this.show = false
				}
				console.log(this.spec_list)
			},
			show_popup(item, index) {
				this.echoimages = []
				this.show = true

				if (this.is_batch) {
					this.showindex = index
					this.chang_item_form = item.form
					if (item.form.image_path) {
						this.echoimages = [{
							url: item.form.image_path
						}]
					}
				} else {
					this.chang_item_form = {
						cost_price: '',
						money: '',
						stock: '',
					}
				}
			},
			// 展示添加按钮
			show_add() {
				// this.show_add_sub = false
				this.show_add_open = true


				this.spec_attr.forEach(item => {
					console.log(item.radiolist_index)
					if (item.radiolist_index != undefined) {
						this.radiolist1[item.radiolist_index].is_select = true
					}
					console.log(this.radiolist1[item.radiolist_index])
				})
			},
			// 删除规格名和规格值
			delet_group(index) {
				this.radiolist1[this.spec_attr[index].radiolist_index].is_select = false
				this.spec_attr.splice(index, 1);
				// this.spec_attr_2.splice(index, 1);
				this.combination();
			},
			//删除规格值
			handleClose(tag, index, idx) {
				this.spec_attr[index].spec_items.splice(idx, 1);
				this.combination();
			},

			showInput(radiolist_index, indexs) {
				console.log(this.radiolist1[radiolist_index])
				console.log(radiolist_index, indexs)

				this.show_add_next_open = true
				this.inputVisible = indexs
				this.checkbox_list = [...this.radiolist1[radiolist_index].next]
				this.checkbox_list.forEach((item, index) => {
					this.checkbox_list[index].checked = false
					if (this.spec_attr[indexs].spec_items.length > 0) {
						this.spec_attr[indexs].spec_items.some((items) => {
							if (item.id == items.item_id) {
								this.checkbox_list[index].is_select = true
								return true
							}
						})
					}
				})
			},
			// 添加规格值
			handleInputConfirm() {
				let id = this.spec_attr[this.inputVisible].group_id
				if (this.new_spec) {
					let info = {
						spec_id: id,
						spec_value: this.new_spec
					};
					this.$api.post('spec_value', info).then((res) => {
						this.checkbox_list.unshift({
							id: res.value_id,
							spec_value: this.new_spec,
							checked: true,
						});
						this.show_add_open_sku_next = false;
						this.new_spec = "";
					});
				}
			},
			//添加规格名和初始的规格值
			addtitle() {
				if (this.skuitem.skuname && this.skuitem.skunum) {
					let info = {
						spec_name: this.skuitem.skuname,
						spec_value: this.skuitem.skunum,
						cate_id: this.cate_ids
					};
					this.$api.post('save', info).then((res) => {
						this.radiolist1.unshift({
							id: res.sp_id,
							spec_name: this.skuitem.skuname,
							next: [{
								id: res.value_id,
								spec_value: this.skuitem.skunum
							}],
							checked: true
						});
						this.radiovalue = [0];
						this.skuitem = {};
						this.show_add_open_sku = false;
					});
				} else {
					uni.showToast({
						title: '请写规格信息',
						icon: 'none',
					})
				}
			},
			// 组合tab表格的参数
			combination(is_change_img = false, change_index) {
				// 规格组合总数 (table行数)
				let spec_attr = [...this.spec_attr];
				console.log(this.spec_list)
				let img_lenght = 0
				let spec_items_list = []
				spec_attr.some((item, index) => {
					if (item.checked) {
						img_lenght = spec_attr[index].spec_items.length
						spec_items_list = [...spec_attr[index].spec_items]
						let data = {
							...spec_attr[0]
						}

						spec_attr[0] = {
							...spec_attr[index]
						}
						spec_attr[index] = data
					}
				})
				var totalRow = 0;
				if (this.spec_attr.length > 0) {
					totalRow = 1
					for (var i = 0; i < spec_attr.length; i++) {
						totalRow *= spec_attr[i].spec_items.length;
					}
				}
				// 遍历tr 行
				var spec_list = [];
				console.log(spec_attr, totalRow)
				for (i = 0; i < totalRow; i++) {
					var rowData = [],
						rowCount = 1, //
						specSkuIdAttr = [];
					// 遍历td 列
					for (var j = 0; j < spec_attr.length; j++) {
						var skuValues = spec_attr[j].spec_items; //遍历出规格值的数组
						rowCount *= skuValues.length; //规格值末尾的所在行数
						var anInterBankNum = totalRow / rowCount;
						var point = Math.floor((i / anInterBankNum) % skuValues.length);
						if (0 === i % anInterBankNum) {
							rowData.push({
								rowspan: anInterBankNum,
								item_id: skuValues[point].item_id,
								spec_value: skuValues[point].spec_value,
								group_id: spec_attr[j].group_id,
							});
						} else {
							rowData.push({
								rowspan: 0,
								item_id: skuValues[point].item_id,
								spec_value: skuValues[point].spec_value,
								group_id: spec_attr[j].group_id,
							});
						}
						specSkuIdAttr.push(skuValues[parseInt(point.toString())].item_id);
					}
					// 合并旧sku数据
					var overlap = []
					console.log(this.spec_list)
					if (this.spec_list.length > 0) {
						overlap = this.spec_list.filter((val) => {
							return val.value_id === specSkuIdAttr.join(",");
						});

					}
					console.log(overlap, 630)
					let images_index = Math.floor(i / (totalRow / img_lenght))
					let images = spec_items_list.length > 0 ? spec_items_list[images_index].image ? spec_items_list[
						images_index].image : false : false
					let image_paths = spec_items_list.length > 0 ? spec_items_list[images_index].image_path ?
						spec_items_list[images_index].image_path :
						false : false
					console.log(change_index, images_index)
					if (images && overlap.length > 0 && is_change_img && change_index == images_index) {
						overlap[0].form.image = images
						overlap[0].form.image_path = image_paths
					}
					let info_form = {
						image: images ? images : '',
						cost_price: "",
						stock: 0,
						money: '',
						image_path: image_paths ? image_paths : '',
						is_select: false,
					}
					spec_list.push({
						value_id: specSkuIdAttr.join(","),
						rows: rowData,
						form: overlap.length > 0 ? overlap[0].form : info_form
					});
				}
				console.log(this.spec_list, 346)

				this.spec_list = [...spec_list];
				this.rendering = false;
				setTimeout(() => {
					this.rendering = true;
				});
			},


			changename: function(event) {
				_this.skuitem.skuname = event.target.value

			},
			changenum: function(event) {
				_this.skuitem.skunum = event.target.value
			},



			submit() {
				let spec_list = [];
				this.spec_list.forEach((item) => {
					spec_list.push({
						value_id: item.value_id,
						rows: item.rows,
						form: {
							image: item.form.image,
							cost_price: item.form.cost_price,
							stock: item.form.stock,
							money: item.form.money,
							image_path: item.form.image_path,
						},
					});
				});
				let spec_many = {
					spec_list: spec_list,
					spec_attr: this.spec_attr,
				};
				spec_many = JSON.stringify(spec_many); //多规格必传，json格式
				console.log(spec_many)
				uni.setStorageSync('spec_many', spec_many)
				uni.navigateBack({
					delta: 1,
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		background: #F5F5F5;
		min-height: 100vh;
	}

	.add_img_box {
		height: 80rpx;
		align-items: center;
	}

	.popup_add {

		.popup_title {
			margin-bottom: 0;
		}

		.form {
			border: none;

			.form-line {
				border-bottom: none;
				border-top: 2rpx solid #eee;
			}

			.left {
				width: 32%;
			}
		}

		.popup_foot {
			margin: 0 auto;
			text-align: center;
			border-top: 2rpx solid #eee;
			width: 100%;

			view {
				width: 49%;
				padding: 30rpx 0 30rpx;
				border-right: 2rpx solid #eee;
			}

			view:last-child {
				border-right: none;
				color: #2790FA;
			}
		}
	}





	.u-radio {
		flex-direction: row-reverse;
		padding: 0px 40rpx;
		justify-content: space-between;
	}



	.popup_top .u-upload {
		width: 105px;
		margin: 0 auto;
	}

	.popup_title {
		text-align: center;
		font-size: 36rpx;
		padding-top: 48rpx;
		margin-bottom: 80rpx;
	}

	.popup_top {
		text-align: center;
	}

	.popup_img {
		width: 222rpx;
		height: 222rpx;
	}

	.popup_spc {
		margin: 40rpx 0;
	}

	.popup_input {
		width: 80%;
		margin: 0 auto;
		border: 1rpx solid #B5B5B5;
		padding: 15rpx 20rpx;
		margin-top: 20rpx;

		text {
			width: 110rpx;
		}

		input {
			width: 78%;
			font-size: 28rpx;
			margin-left: 20rpx;
		}
	}

	.popup_foot {
		width: 80%;
		margin: 100rpx auto 30rpx;
		justify-content: space-between;
	}

	.popup_sub {
		width: 290rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #DCDCDC;
		border-radius: 88rpx;
		font-size: 36rpx;
	}

	.green {
		background-image: linear-gradient(to right, #62BB91, #4EABB6);
		color: #FFFFFF;
	}

	.sku_line {
		padding: 20rpx 0 30rpx;
		flex-wrap: wrap;
	}

	.flex_align {
		display: flex;
		align-items: center;
	}

	.li_box {

		display: inline-block;
		margin-bottom: 10rpx;
		margin-right: 10rpx;

		.text_box {
			border: 2rpx solid #B5B5B5;
			padding: 10rpx 10rpx 10rpx 20rpx;
			margin: 10rpx auto;
			color: #999999;
			justify-content: space-around;
		}
	}

	.placeholder {
		font-size: 20rpx;
	}

	.li_input input {
		font-size: 28rpx;
	}

	.li_input {
		padding: 10rpx 10rpx;
		width: 200rpx;
		font-size: 20rpx;
		text-align: center;
		border: 1rpx solid #B5B5B5;
		color: #000;
		margin-bottom: 10rpx;

		.tianjia {
			position: relative;
			z-index: 10;
		}
	}

	.add_sku_input {
		border: 2rpx solid #B5B5B5;
		padding: 10rpx 20rpx;
		display: inline-block;
		color: #000;
		margin-bottom: 10rpx;
	}

	.li_close {
		margin-left: 10rpx;
	}

	.piliang_box {
		flex-direction: row-reverse
	}

	.piliang {
		padding: 10rpx 30rpx;
		text-align: end;
	}

	.form_table {
		padding: 0 !important;
		overflow-x: auto;

		.table_head {
			text-align: center;

			.li_check {
				min-width: 80rpx;
				height: auto;
				position: relative;
			}

			.img_box {
				min-width: 150rpx;
				height: 100rpx;

			}

			.li {
				min-width: 150rpx;
			}

			.info_price {
				min-width: 300rpx;
			}
		}

		.flexs {
			display: flex;
		}

		.table_line {
			width: 100%;
			text-align: center;
			min-height: 150rpx;

			// border-top: 1rpx solid #B5B5B5;
			.li_check {
				min-width: 50rpx;
				border-top: 1rpx solid #B5B5B5;
				height: auto;
				position: relative;
			}

			.img_box {
				min-width: 150rpx;
				border-top: 1rpx solid #B5B5B5;
				position: relative;

				.table_img {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -50rpx;
					margin-left: -50rpx;
				}
			}

			.li {
				min-width: 150rpx;
				border-top: 1rpx solid #B5B5B5;
				height: auto;
				position: relative;
			}

			.li_style {
				width: 100%;
				position: absolute;
				display: inline-block;
				top: 25%;
				left: 0;
			}

			.info_price {
				min-width: 300rpx;
				height: auto;
				border-top: 1rpx solid #B5B5B5;
				position: relative;

				.price_box {
					height: 120rpx;
					position: absolute;
					top: 50%;
					margin-left: 40rpx;
					margin-top: -60rpx;
					font-size: 22rpx;

					.price {
						min-width: 220rpx;
					}
				}
			}
		}
	}

	.skulist {
		padding-bottom: 170rpx;
	}

	// 	.title {
	// 		margin: 30rpx 30rpx 0;
	// 		color: #2E2E2E;
	// 	}

	// 	.photos {
	// 		display: flex;
	// 		flex-direction: column;

	// 		.photobox {
	// 			padding: 20rpx;

	// 			.imgupdata {
	// 				width: 100%;
	// 				height: 410rpx;
	// 				border: 2rpx solid #C1C1C1;
	// 				border-radius: 4rpx;
	// 				text-align: center;

	// 				image {
	// 					width: 66rpx;
	// 					height: auto;
	// 					margin: 150rpx auto 40rpx;
	// 				}

	// 				.text {
	// 					width: 100%;
	// 					text-align: center;
	// 					font-size: 30rpx;
	// 					color: #999999;
	// 				}
	// 			}
	// 		}
	// 	}

	.form {
		background-color: #FFF;
		margin: 30rpx 30rpx 0;
		padding: 0rpx 25rpx;
		border-bottom: 15rpx solid #f3f3f3;


		.form-line {
			line-height: 90rpx;
			border-bottom: 2rpx solid #eeeeee;
			width: 100%;
			// display: inline-block;

			.linetext {
				color: #FF0000;
			}
		}

		.flex {
			display: flex;
			line-height: 109rpx;
			height: 110rpx;
			justify-content: space-between;
			align-items: center;

			input {
				height: 110rpx;
				line-height: 109rpx;
				display: inline-block;
				text-align: right;
			}
		}

		.flex_center {
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			color: #373737;
		}

		.left {
			width: 30%;
			font-size: 30rpx;
			font-weight: 500;
		}
	}


	// .u-list-item {
	// 	background: #D0D0D0 !important;
	// }

	.popup_box {
		.u-checkbox {
			flex-direction: row-reverse;
			padding: 0px 40rpx;
			justify-content: space-between;
		}
	}

	.submitbox {
		padding: 39rpx 0 calc(env(safe-area-inset-bottom) + 39rpx) 0;
		padding: 39rpx 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		background: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;

		.u-checkbox {
			padding: 0px 40rpx;
			justify-content: space-between;
		}

		.submitbtn {
			width: 680rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background: linear-gradient(86deg, #38BE8C, #05ADBB);
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
		}

		.btn {
			width: 270rpx;
			height: 80rpx;
			border-radius: 45rpx;
			background: linear-gradient(86deg, #38BE8C, #05ADBB);
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.flex_li {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
	}

	.mr30 {
		margin-right: 30rpx;
	}

	.ml15 {
		margin-left: 15rpx;
	}
</style>
